<template>
  <div class="hospital-detail-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>医院详情</h2>
      <div class="header-actions">
        <el-button type="primary" :icon="Edit" @click="handleEdit">
          编辑
        </el-button>
      </div>
    </div>

    <!-- 医院基本信息卡片 -->
    <el-card class="basic-info-card">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>

      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">医院名称：</span>
          <span class="info-value">{{ hospital?.name }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">医院等级：</span>
          <span class="info-value">{{ hospital?.level }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">医院类型：</span>
          <span class="info-value">{{ hospital?.type }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">是否推荐：</span>
          <span class="info-value">{{ hospital?.isRecommended ? '是' : '否' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">医生人数：</span>
          <span class="info-value">{{ hospital?.doctorCount }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">科室数量：</span>
          <span class="info-value">{{ hospital?.departmentCount }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">所在地区：</span>
          <span class="info-value">{{ hospital?.region }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">医院电话：</span>
          <span class="info-value">{{ hospital?.phone }}</span>
        </div>
      </div>

      <div class="hospital-image-container">
        <el-image :src="hospital?.imageUrl" class="hospital-image" fit="cover" />
      </div>

      <div class="info-item full-width">
        <span class="info-label">详细地址：</span>
        <span class="info-value">{{ hospital?.address }}</span>
      </div>
    </el-card>

    <!-- 科室信息卡片 -->
    <el-card class="department-card">
      <template #header>
        <div class="card-header">
          <span>科室设置</span>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="handleManageDepartments">
              管理科室
            </el-button>
          </div>
        </div>
      </template>

      <div v-if="departments.length > 0" class="department-list">
        <div v-for="dept in departments" :key="dept.id" class="department-item">
          <h3 class="department-name">{{ dept.name }}</h3>
          <p class="department-desc">{{ dept.description || '暂无介绍' }}</p>
          <div class="sub-departments" v-if="dept.subDepartments && dept.subDepartments.length > 0">
            <span v-for="subDept in dept.subDepartments" :key="subDept.id" class="sub-dept-tag">
              {{ subDept.name }}
            </span>
          </div>
        </div>
      </div>
      <div v-else class="empty-tip">暂无科室信息</div>
    </el-card>

    <!-- 医生团队卡片 -->
    <el-card class="doctors-card">
      <template #header>
        <div class="card-header">
          <span>医生团队</span>
        </div>
      </template>

      <div v-if="doctors.length > 0" class="doctors-list">
        <el-carousel
          :interval="5000"
          arrow="always"
          height="300px"
        >
          <el-carousel-item v-for="doctor in doctors" :key="doctor.id">
            <div class="doctor-item">
              <el-image :src="doctor.avatar" class="doctor-avatar" />
              <h3 class="doctor-name">{{ doctor.name }}</h3>
              <p class="doctor-title">{{ doctor.title }}</p>
              <p class="doctor-dept">{{ doctor.department }}</p>
              <p class="doctor-desc">{{ doctor.briefIntroduction }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div v-else class="empty-tip">暂无医生信息</div>
    </el-card>

    <!-- 医院介绍卡片 -->
    <el-card class="introduction-card">
      <template #header>
        <div class="card-header">
          <span>医院介绍</span>
        </div>
      </template>

      <div class="introduction-content" v-html="hospital?.description"></div>
    </el-card>

    <!-- 特色服务卡片 -->
    <el-card class="services-card">
      <template #header>
        <div class="card-header">
          <span>特色服务</span>
        </div>
      </template>

      <div v-if="services.length > 0" class="services-list">
        <div v-for="service in services" :key="service.id" class="service-item">
          <h3 class="service-name">{{ service.name }}</h3>
          <p class="service-desc">{{ service.description }}</p>
        </div>
      </div>
      <div v-else class="empty-tip">暂无特色服务信息</div>
    </el-card>

    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import { hospitalApi } from '@/api/index'
import type { HospitalDetail, Department, Doctor, Service } from '@/api/index'

/**
 * 智慧医疗系统 - 医院详情页面
 * 功能：展示医院的详细信息，包括基本信息、科室设置、医生团队、特色服务等
 */

// 接口类型定义
interface HospitalDetail {
  id: number
  name: string
  imageUrl: string
  level: string
  type: string
  address: string
  phone: string
  region: string
  description: string
  isRecommended: boolean
  doctorCount: number
  departmentCount: number
  // 其他医院相关字段
}

interface Department {
  id: number
  name: string
  description: string
  subDepartments: Array<{ id: number; name: string }>
}

interface Doctor {
  id: number
  name: string
  title: string
  department: string
  avatar: string
  briefIntroduction: string
}

interface Service {
  id: number
  name: string
  description: string
}

// 响应式数据
const hospital = ref<HospitalDetail | null>(null)
const departments = ref<Department[]>([])
const doctors = ref<Doctor[]>([])
const services = ref<Service[]>([])
const loading = ref(false)

// 路由相关
const route = useRoute()
const router = useRouter()
const hospitalId = Number(route.params.id)

// 生命周期
onMounted(() => {
  loadHospitalDetail()
  loadDepartments()
  loadDoctors()
  loadServices()
})

/**
 * 加载医院详情数据
 */
const loadHospitalDetail = async () => {
  loading.value = true
  try {
    const response = await hospitalApi.getDetail(hospitalId)
    if (response.code === 200) {
      hospital.value = response.data
    } else {
      ElMessage.error('获取医院详情失败')
    }
  } catch (error) {
    console.error('加载医院详情出错:', error)
    ElMessage.error('加载医院详情失败，请重试')
  } finally {
    loading.value = false
  }
}

/**
 * 加载科室数据
 */
const loadDepartments = async () => {
  try {
    const response = await hospitalApi.getDepartments(hospitalId)
    if (response.code === 200) {
      departments.value = response.data
    } else {
      ElMessage.error('获取科室信息失败')
    }
  } catch (error) {
    console.error('加载科室信息出错:', error)
    ElMessage.error('加载科室信息失败，请重试')
  }
}

/**
 * 加载医生数据
 */
const loadDoctors = async () => {
  try {
    const response = await hospitalApi.getDoctors(hospitalId)
    if (response.code === 200) {
      doctors.value = response.data
    } else {
      ElMessage.error('获取医生信息失败')
    }
  } catch (error) {
    console.error('加载医生信息出错:', error)
    ElMessage.error('加载医生信息失败，请重试')
  }
}

/**
 * 加载特色服务数据
 */
const loadServices = async () => {
  try {
    const response = await hospitalApi.getServices(hospitalId)
    if (response.code === 200) {
      services.value = response.data
    } else {
      ElMessage.error('获取特色服务信息失败')
    }
  } catch (error) {
    console.error('加载特色服务信息出错:', error)
    ElMessage.error('加载特色服务信息失败，请重试')
  }
}

/**
 * 返回上一页
 */
const handleBack = () => {
  router.back()
}

/**
 * 跳转到编辑页面
 */
const handleEdit = () => {
  router.push({
    path: `/content/hospital/edit/${hospitalId}`
  })
}

/**
 * 跳转到科室管理页面
 */
const handleManageDepartments = () => {
  router.push({
    path: `/content/hospital/${hospitalId}/departments`
  })
}
</script>

<style lang="scss" scoped>
.hospital-detail-page {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: $text-color-primary;
    }
  }

  .basic-info-card,
  .department-card,
  .doctors-card,
  .introduction-card,
  .services-card {
    margin-bottom: 24px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .info-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;

    .info-label {
      font-weight: 500;
      margin-right: 8px;
      min-width: 100px;
    }

    .info-value {
      flex: 1;
    }
  }

  .full-width {
    grid-column: 1 / -1;
  }

  .hospital-image-container {
    margin-bottom: 24px;
    text-align: center;

    .hospital-image {
      max-width: 100%;
      max-height: 300px;
      border-radius: 4px;
    }
  }

  .department-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  .department-item {
    padding: 16px;
    background-color: $bg-color;
    border-radius: 4px;

    .department-name {
      margin-top: 0;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 600;
    }

    .department-desc {
      margin-bottom: 12px;
      color: $text-color-regular;
    }

    .sub-departments {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .sub-dept-tag {
      padding: 4px 8px;
      background-color: $primary-color-light;
      color: $primary-color;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  .doctors-list {
    height: 300px;
  }

  .doctor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;

    .doctor-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-bottom: 16px;
    }

    .doctor-name {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 600;
    }

    .doctor-title,
    .doctor-dept {
      margin: 0 0 8px 0;
      color: $text-color-regular;
    }

    .doctor-desc {
      margin: 0;
      color: $text-color-secondary;
    }
  }

  .introduction-content {
    line-height: 1.6;
    color: $text-color-regular;
  }

  .services-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  .service-item {
    padding: 16px;
    background-color: $bg-color;
    border-radius: 4px;

    .service-name {
      margin-top: 0;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 600;
    }

    .service-desc {
      color: $text-color-regular;
    }
  }

  .empty-tip {
    padding: 32px 0;
    text-align: center;
    color: $text-color-placeholder;
  }

  .back-button-container {
    margin-top: 32px;
    text-align: center;
  }
}
</style>